<template>
  <view class="h-screen bg-white relative overflow-hidden">
    <!-- 高端状态栏 -->
    <view class="flex justify-between items-center px-5 py-2 bg-transparent text-sm font-semibold h-11 relative z-10"
      style="padding-top: calc(8px + var(--status-bar-height));">
      <view class="status-left flex items-center">
        <text class="premium-time mr-1">{{ currentTime }}</text>
        <text class="premium-date text-xs opacity-70">{{ currentDay }}</text>
      </view>
      <view class="status-center flex items-center justify-center">
        <view
          class="brand-logo w-6 h-6 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold">
          E
        </view>
      </view>
      <view class="flex gap-1 items-center">
        <text class="iconfont icon-signal text-xs opacity-90 ml-1"></text>
        <text class="iconfont icon-wifi text-xs opacity-90 ml-1"></text>
        <text class="iconfont icon-battery text-xs opacity-90 ml-1"></text>
      </view>
    </view>

    <!-- 背景装饰 -->
    <view class="absolute inset-0 z-0 overflow-hidden">
      <view class="bg-gradient-primary absolute top-0 left-0 w-full h-third opacity-20"
        style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);"></view>
      <view class="bg-particles">
        <view v-for="(_, i) in 5" :key="i" class="particle absolute rounded-full bg-indigo-200 opacity-30" :style="{
          width: `${20 + Math.random() * 30}px`,
          height: `${20 + Math.random() * 30}px`,
          top: `${Math.random() * 100}%`,
          left: `${Math.random() * 100}%`,
          animationDelay: `${Math.random() * 5}s`,
          animationDuration: `${15 + Math.random() * 15}s`
        }"></view>
      </view>
      <view class="bg-mesh absolute inset-0 opacity-10">
        <view class="mesh-gradient"></view>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="h-full pt-2 pb-16"
      style="height: calc(100vh - var(--status-bar-height) - 44px - 60px);">
      <!-- 奢华个人中心 -->
      <view class="premium-page">
        <!-- 个人资料头部 -->
        <view class="luxury-profile-header relative h-48 mb-16">
          <view class="profile-backdrop absolute inset-0">
            <view class="backdrop-gradient absolute inset-0 bg-gradient-to-b from-indigo-500 to-purple-600 opacity-90">
            </view>
            <view class="backdrop-pattern absolute inset-0">
              <view v-for="(_, i) in 3" :key="i" class="pattern-dot absolute rounded-full bg-white opacity-10" :style="{
                width: `${30 + Math.random() * 50}px`,
                height: `${30 + Math.random() * 50}px`,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${15 + Math.random() * 15}s`
              }"></view>
            </view>
          </view>
          <view class="profile-content-luxury relative z-10 flex flex-col items-center pt-6">
            <view class="premium-avatar-section mb-20">
              <view class="avatar-luxury-container relative">
                <view
                  class="avatar-ring-outer absolute inset-0 rounded-full border-2 border-white opacity-30 animate-pulse"
                  style="transform: scale(1.15);"></view>
                <view
                  class="avatar-ring-inner absolute inset-0 rounded-full border-2 border-white opacity-50 animate-pulse"
                  style="animation-delay: 1s;"></view>
                <image src="/static/avatar.jpg"
                  class="avatar-luxury w-24 h-24 rounded-full object-cover border-2 border-white shadow-lg"></image>
                <button
                  class="avatar-edit-luxury absolute right-0 bottom-0 w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-md"
                  @tap="editAvatar">
                  <view class="btn-surface"></view>
                  <text class="iconfont icon-camera text-indigo-600"></text>
                </button>
              </view>
            </view>
          </view>
        </view>

        <view class="profile-info-luxury -mt-16 text-center px-5 mb-8">
          <text class="profile-name text-2xl font-bold text-slate-800 block">{{ userProfile.name }}</text>
          <text class="profile-title text-sm text-slate-500 mt-1 block">{{ userProfile.title }}</text>
          <view class="profile-badges-luxury flex justify-center mt-3">
            <view class="luxury-badge vip flex items-center px-3 py-1 rounded-full bg-amber-100 mr-2">
              <text class="iconfont icon-crown text-amber-500 mr-1"></text>
              <text class="text-xs font-medium text-amber-600">VIP用户</text>
            </view>
            <view class="luxury-badge certified flex items-center px-3 py-1 rounded-full bg-blue-100">
              <text class="iconfont icon-certificate text-blue-500 mr-1"></text>
              <text class="text-xs font-medium text-blue-600">认证开发者</text>
            </view>
          </view>
        </view>

        <!-- 高级统计卡片 -->
        <view class="luxury-profile-stats grid grid-cols-2 gap-3 px-5 mb-8">
          <view v-for="(stat, index) in profileStats" :key="index"
            class="premium-stat-card-profile relative rounded-xl overflow-hidden border border-slate-100 shadow-sm bg-white p-4">
            <view class="stat-backdrop absolute inset-0 opacity-5"></view>
            <view class="stat-content flex flex-col items-center justify-center">
              <view class="stat-icon-large mb-2">
                <text class="iconfont text-xl" :class="stat.icon" style="color: #667eea;"></text>
              </view>
              <text class="stat-value-large text-2xl font-bold text-slate-800">{{ stat.value }}</text>
              <text class="stat-label-large text-xs text-slate-500 mt-1">{{ stat.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="fixed bottom-0 left-0 right-0 h-16 bg-white bg-opacity-80 border-t border-slate-100 shadow-sm z-50">
      <view class="flex h-full">
        <navigator url="/pages/index/index" open-type="switchTab"
          class="flex-1 flex flex-col items-center justify-center">
          <view class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-half">
            <text class="iconfont icon-home text-slate-500"></text>
          </view>
          <text class="text-xs font-medium text-slate-500">首页</text>
        </navigator>
        <navigator url="/pages/projects/index" open-type="switchTab"
          class="flex-1 flex flex-col items-center justify-center">
          <view class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-1">
            <text class="iconfont icon-briefcase text-slate-500"></text>
          </view>
          <text class="text-xs font-medium text-slate-500">项目</text>
        </navigator>
        <navigator url="/pages/profile/index" open-type="switchTab"
          class="flex-1 flex flex-col items-center justify-center">
          <view class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mb-half">
            <text class="iconfont icon-user-circle text-indigo-600"></text>
          </view>
          <text class="text-xs font-medium text-indigo-600">我的</text>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 时间相关
const currentTime = ref('');
const currentDay = ref('');

// 更新时间
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;

  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  currentDay.value = days[now.getDay()];
};

// 用户资料
const userProfile = ref({
  name: '张三',
  title: '全栈开发工程师',
  avatar: '/static/avatar.jpg'
});

// 编辑头像
const editAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 这里只是模拟，实际应用中需要上传到服务器
      userProfile.value.avatar = res.tempFilePaths[0];
      uni.showToast({ title: '头像已更新', icon: 'success' });
    }
  });
};

// 个人统计数据
const profileStats = ref([
  {
    icon: 'icon-check-circle',
    value: '127',
    label: '完成习惯'
  },
  {
    icon: 'icon-project-diagram',
    value: '8',
    label: '活跃项目'
  },
  {
    icon: 'icon-fire',
    value: '45',
    label: '连续天数'
  },
  {
    icon: 'icon-trophy',
    value: '92%',
    label: '完成率'
  }
]);

// 设置选项
const settings = ref([
  {
    icon: 'icon-bell',
    title: '智能提醒',
    description: '个性化习惯提醒推送',
    enabled: true
  },
  {
    icon: 'icon-moon',
    title: '深色主题',
    description: '护眼模式，降低蓝光伤害',
    enabled: false
  },
  {
    icon: 'icon-cloud-upload',
    title: '云端同步',
    description: '多设备数据实时同步',
    enabled: true
  }
]);

// 切换设置
const toggleSetting = (index: number) => {
  settings.value[index].enabled = !settings.value[index].enabled;
};

// 成就数据
const achievements = ref([
  {
    icon: 'icon-fire',
    title: '火焰守护者',
    description: '连续30天保持习惯',
    earned: true,
    progress: '100%'
  },
  {
    icon: 'icon-rocket',
    title: '项目启动者',
    description: '成功创建首个项目',
    earned: true,
    progress: '100%'
  },
  {
    icon: 'icon-crown',
    title: '习惯大师',
    description: '进度 45/100天',
    earned: false,
    progress: '45%'
  },
  {
    icon: 'icon-star',
    title: '目标达成者',
    description: '进度 3/10个目标',
    earned: false,
    progress: '30%'
  }
]);

// 定时器
let timer: number;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 60000) as unknown as number;
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style>
/* 浮动粒子动画 */
.particle {
  animation: floatParticle 15s infinite ease-in-out;
}

@keyframes floatParticle {

  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  25% {
    transform: translateY(-30px) translateX(20px);
  }

  50% {
    transform: translateY(-15px) translateX(-20px);
  }

  75% {
    transform: translateY(30px) translateX(10px);
  }
}
</style>